<script lang="ts">
  import { onMount } from "svelte";
  import { selectFictitiousOrderPage } from '../api';
  import { formatTime } from '../utils/common';

  let services: any[] = [];
  // for (let i = 0; i < 100; i++) {
  //   services.push({
  //     productName: '张--',
  //     mobile: '138****' + Math.floor(Math.random() * 10000),
  //     address: '越南胡志明市',
  //     orderStatus: '已投放'
  //   });
  // }

  onMount(async () => {
    await getOrderList();
    const scrollableDiv = document.querySelector('.scrollable-tbody');
    let scrollAmount = 0;
    const scrollStep = 0.5; // 每次滚动的像素
    const scrollInterval = 80; // 滚动间隔时间

    const scrollContent = () => {
      if (!scrollableDiv) return;
      scrollAmount += scrollStep;
      if (scrollAmount >= scrollableDiv.scrollHeight - scrollableDiv.clientHeight) {
        scrollAmount = 0; // 回到顶部
      }
      scrollableDiv.scrollTop = scrollAmount;
    };

    const intervalId = setInterval(scrollContent, scrollInterval);

    return () => clearInterval(intervalId); // 清除定时器
  });

  const getOrderList = async () => {
    const {rows} = await selectFictitiousOrderPage({
      ypageNum: 1,
      ypageSize: 100
    });
    services= [...rows,...rows, ...rows]
  };

  const handleClick = (service: any) => {
    console.log(service);
  };
</script>

<div class="table w-full">
  <div class="thead">
    <!-- <div class="tr text-left whitespace-nowrap text-[#fff] text-[12px]"> -->
      <div class="th py-2 px-4">
        <div>用户名称</div>
      </div>
      <div class="th py-2 px-4">
        <div>订单编号</div>
      </div>
      <div class="th py-2 px-4">
        <div>网点名称</div>
      </div>
      <div class="th py-2 px-4">
        <div>创建时间</div>
      </div>
    <!-- </div> -->
  </div>
  <div class="scrollable-tbody">
    {#each services as service}
      <div
        class="tr cursor-pointer text-[#fff]"
        on:click={() => handleClick(service)}
      >
        <div class="td py-3 px-4">
          <div class="flex items-center">
            {#if service.userAvatar}
              <img class="rounded-full flex-shrink-0 w-[26px] h-[26px]" src={service.userAvatar} alt=""> 
            {:else}
              <div class="flex-shrink-0 w-[26px] h-[26px] bg-[#999] rounded-full"></div>
            {/if}
            <div class="ml-2 truncate max-w-[40px]">{service.userNickName}</div>
          </div>
        </div>
        <div class="td py-3 px-4">
          <div class="truncate max-w-[60px]">{service.orderNo}</div>
        </div>
        <div class="td py-3 px-4">
          <div class="truncate max-w-[60px]">{service.outletsName || '--'}</div>
        </div>
        <div class="td py-3 px-4">
          <div class="truncate max-w-[60px]">{formatTime(service.userCreateTime, 'MM-DD HH:mm:ss') || '--'}</div>
        </div>
      </div>
    {/each}
  </div>
</div>

<style scoped>
  .table {
    display: table;
    width: 100%;
    height: 100%;
    table-layout: auto;
    font-size: 1.2rem;
  }
  .thead {
    display: flex;
    flex-direction: row;
  }
  .thead .th {
    flex: 1;
    white-space: nowrap;
  }
  .tr {
    /* display: table-row; */
    display: flex;
  }
 
  .td {
    /* display: table-cell; */
    flex: 1;
  }
  .scrollable-tbody {
    display: block;
    height: calc(40%);
    overflow-y: hidden;
  }
  .thead .th {
    color: #4D9CFE;
  }
  .tr {
    padding-bottom: 1px;
  }
  .tr:hover {
    background-color: rgba(9, 20, 47, 0.6);
  }
  .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
</style>